<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>研学旅行</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" th:href="@{/css/font.css}">
	<link rel="stylesheet" th:href="@{/css/xadmin.css}">
    <link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.jquery.min.js"></script>
    <script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/js/xadmin.js}"></script>

</head>
<body>
    <!-- 顶部开始 -->
    <div class="container" th:include="head :: header">
    	
    </div>
    <!-- 顶部结束 -->
    <!-- 中部开始 -->
    <div class="wrapper">
        <!-- 左侧菜单开始 -->
        <div class="left-nav">
        	<div id="side-nav"  th:include="left :: left_nav">
        	
        	</div>
        </div>
        <!-- 左侧菜单结束 -->
        <!-- 右侧主体开始 -->
        <div class="page-content">
          <div class="content">
            <!-- 右侧内容框架，更改从这里开始 -->
            <blockquote class="layui-elem-quote">
               每月订单量统计
            </blockquote>
             <div class="">
                	<label class="layui-form-label">年份:</label>
                	<select class="layui-select" id="select" onchange="show()" style="width: 150px;">
                		<option th:each="itme,state : ${years}" th:text="${itme.years}">
                			
                		</option>
                	</select>
                	
            </div>
            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
            <div id="main" style="width: 100%;height:400px;"></div>
            <blockquote class="layui-elem-quote" style="text-align: center;">
           		<p style="font-size:20px;font-weight:600;">每月订单量数据图</p>
            	<a id="daoru" class="layui-btn" style="position:absolute;right: 50px;top:540px" onclick="daoru()" >生成Excel文件</a>
                <br>
                <table class="layui-table" >
  					<thead>
  						<tr>
  							<th>月份</th>
  							<th>订单量</th>
  						</tr>
  					</thead>
  					<tbody id="tb">
  							
  					</tbody>
				</table>
            </blockquote>
            <!-- 右侧内容框架，更改从这里结束 -->
          </div>
        </div>
        <!-- 右侧主体结束 -->
    </div>
    <!-- 中部结束 -->
    <!-- 底部开始 -->
    <div class="footer">
        <div class="copyright">Copyright ©2019 研学旅行管理系统</div>  
    </div>
    <!-- 底部结束 -->
    <!-- 背景切换开始 -->
    <div class="bg-changer">
        <div class="swiper-container changer-list">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img class="item" src="./images/a.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/b.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/c.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/d.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/e.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/f.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/g.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/h.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/i.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/j.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/k.jpg" alt=""></div>
                <div class="swiper-slide"><span class="reset">初始化</span></div>
            </div>
        </div>
        <div class="bg-out"></div>
        <div id="changer-set"><i class="iconfont">&#xe696;</i></div>   
    </div>
    <!-- 背景切换结束 -->
        
        <script src="http://cdn.bootcss.com/echarts/3.3.2/echarts.min.js" charset="utf-8"></script>
        <script type="text/javascript" th:src="@{/js/echarts-for-x-admin.js}"></script>
		<script type="text/javascript" th:src="@{/js/vue.js}" ></script>
        <script type="text/javascript">
        var vue = new Vue({
      		 
      		 el:".bg-out",
      		 data : {
      			 data : [],
      			series:[]
      		 }
      		 
      	 });
        
      	 function daoru(){
    		var years = $("#select").val();
     		MonthsDdExcel = "http://localhost:8080/MonthsDdExcel?years="+years;
     		window.location.href=MonthsDdExcel; 
     	}
        show();
        function show(){
        	var id = $("#select").val();
          	 $.ajax({
     			url:"http://localhost:8080/toAjaxMonthOr",
     			data:{
     				years:id
     			},
     			type:"post",
     			dataType:"json",
     			success:function(data){
     					vue.data=data;
     					begin();
     					happy(id);
     			}
     			
     		});
        }
        
        function happy(years){
        	$.ajax({
     			url:"http://localhost:8080/toAjaxMonthOrtwo",
     			data:{
     				years:years
     			},
     			type:"post",
     			dataType:"json",
     			success:function(data){
     				var user='';
     				for(var i =0;i<data.length;i++){
     					user+="<tr>";
						user+="<td>"+data[i].months+"</td>";
						user+="<td>"+data[i].sum+"</td>";
						user+="</tr>";
					}
     				$("#tb").html(" ");
					$("#tb").append(user);
     			}
     			
     		});
        }
        
        function begin(){
        	
        	setTimeout(function(){
        	var dom = document.getElementById("main");
        	var myChart = echarts.init(dom);
        	var app = {};
        	option = null;
        	option = {
          			 toolbox: {
            				show: true,
                         feature: {
                             dataZoom: {
                                 yAxisIndex: 'none'
                             },
                             magicType: {type: ['line', 'bar']},
                             restore: {},
                             saveAsImage: {}
                         },
                         itemSize:18,//工具栏 icon 的大小
                         iconStyle:{
                             normal:{
                               borderColor:'skyblue',
                               
                             }
                         
                         }
                      },
        	    xAxis: {
        	        type: 'category',
        	        data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月', '九月', '十月', '十一月', '十二月']
        	    },
        	    yAxis: {
        	        type: 'value'
        	    },
        	    series: [{
        	        data: vue.data,
        	        type: 'line',
        	        smooth: true
        	    }]
        	};
        	;
        	if (option && typeof option === "object") {
        	    myChart.setOption(option, true);
        	}
        	},100);
        	
        };
        
        

    	</script>
        
        
</body>
</html>